<template>
  <div class="recommend-view">
    <div v-show="showBanner" class="banner-contaner" :style="{padding:showStyle}">
      <div class="banner" :style="{backgroundSize:imgStyle,backgroundImage: `url(${imgUrl})`}" />
    </div>
    <div style="padding: 10px 6px 10px 15px" :style="{overflow:scroll?'auto':''}">
      <div class="flex" :class="{'flex-wrap':!scroll}">
        <div
          class="margin-bottom-sm bg-white flex align-center justify-center flex-direction"
          style="
            width: 167px;
            height: 260px;
            padding: 5px;
            margin-right: 9px;
            border-radius: 4px;
          "
        >
          <img style="width: 140px; height: 140px; margin: 5px">
          <div style="padding-top: 14px">
            <div
              class="text-cut"
              style="
                width: 147px;
                height: 20px;
                font-size: 14px;
                color: rgb(45, 68, 84);
              "
            >
              组合短袖
            </div>
            <div
              class="text-cut margin-tb-xs"
              style="
                width: 147px;
                height: 20px;
                font-size: 14px;
                color: rgb(153, 153, 153);
              "
            >
              短袖
            </div>
            <div
              class="flex align-center justify-between"
              style="padding-top: 3px"
            >
              <div
                style="
                  width: 57px;
                  height: 21px;
                  line-height: 21px;
                  font-size: 12px;
                  color: rgb(246, 41, 41);
                "
              >
                ￥2
              </div>
              <div style="color: rgb(176, 176, 176); font-size: 12px">
                件/份
              </div>
              <div class="round" style="width: 24px; height: 24px">
                <!---->
                <img src="../../../../../assets//images/cart.png" width="100%" height="100%">
              </div>
            </div>
          </div>
        </div>
        <div
          class="margin-bottom-sm bg-white flex align-center justify-center flex-direction"
          style="
            width: 167px;
            height: 260px;
            padding: 5px;
            margin-right: 9px;
            border-radius: 4px;
          "
        >
          <img style="width: 140px; height: 140px; margin: 5px">
          <div style="padding-top: 14px">
            <div
              class="text-cut"
              style="
                width: 147px;
                height: 20px;
                font-size: 14px;
                color: rgb(45, 68, 84);
              "
            >
              秋衣
            </div>
            <div
              class="text-cut margin-tb-xs"
              style="
                width: 147px;
                height: 20px;
                font-size: 14px;
                color: rgb(153, 153, 153);
              "
            >
              秋衣
            </div>
            <div
              class="flex align-center justify-between"
              style="padding-top: 3px"
            >
              <div
                style="
                  width: 57px;
                  height: 21px;
                  line-height: 21px;
                  font-size: 12px;
                  color: rgb(246, 41, 41);
                "
              >
                ￥1
              </div>
              <div style="color: rgb(176, 176, 176); font-size: 12px">
                秋衣/份
              </div>
              <div class="round" style="width: 24px; height: 24px">
                <img src="../../../../../assets//images/cart.png" width="100%" height="100%" draggable="false">
              </div>
            </div>
          </div>
        </div>
        <div
          class="margin-bottom-sm bg-white flex align-center justify-center flex-direction"
          style="
            width: 167px;
            height: 260px;
            padding: 5px;
            margin-right: 9px;
            border-radius: 4px;
          "
        >
          <img style="width: 140px; height: 140px; margin: 5px">
          <div style="padding-top: 14px">
            <div
              class="text-cut"
              style="
                width: 147px;
                height: 20px;
                font-size: 14px;
                color: rgb(45, 68, 84);
              "
            >
              上衣
            </div>
            <div
              class="text-cut margin-tb-xs"
              style="
                width: 147px;
                height: 20px;
                font-size: 14px;
                color: rgb(153, 153, 153);
              "
            >
              测试1
            </div>
            <div
              class="flex align-center justify-between"
              style="padding-top: 3px"
            >
              <div
                style="
                  width: 57px;
                  height: 21px;
                  line-height: 21px;
                  font-size: 12px;
                  color: rgb(246, 41, 41);
                "
              >
                ￥5
              </div>
              <div style="color: rgb(176, 176, 176); font-size: 12px">1/份</div>
              <div class="round" style="width: 24px; height: 24px">
                <img src="../../../../../assets//images/cart.png" width="100%" height="100%" draggable="false">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RecommendView',
  props: {
    options: {
      type: Object,
      default: null
    }
  },
  computed: {
    showBanner() {
      return this.options.banner.show
    },
    imgUrl() {
      const { imgUrl } = this.options.banner
      if (imgUrl) {
        return JSON.parse(imgUrl)[0].url
      } else {
        return require('../../../../../assets/images/command.png')
      }
    },
    showStyle() {
      return this.options.banner.showStyle
    },
    imgStyle() {
      return this.options.banner.imgStyle
    },
    scroll() {
      return this.options.scroll
    }
  }
}
</script>
<style lang="scss" scoped>
.banner{
  height: 105px;
}
.list{
  padding: 10px;
}
</style>
